<template>
  <div class="file-view-container">
    <div class="file-view">
      <template v-if="props.fileType === 'img'">
        <el-image
          style="width: 80%"
          :src="url"
          fit="scale-down"
          :preview-src-list="[fileData?.filepath]"
        >
          <template #error>
            <div class="image-slot">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
      </template>
      <template v-else-if="props.fileType === 'doc'">
        <iframe class="iframe-content" :src="url" frameborder="0"></iframe>
      </template>
      <template v-else-if="props.fileType === 'mp3'">
        <audio :src="fileData?.url" controls></audio>
      </template>
      <template v-else-if="props.fileType === 'mp4'">
        <video style="width: 100%; height: auto" :src="fileData?.url" controls></video>
      </template>
      <el-empty v-else description="暂不支持预览该模式文件" />
    </div>
    <div class="file-info">
      <div class="item">
        <i class="iconfont icona-wodeyonghufill" />
        {{ props.fileData.user_name }}
      </div>
      <div class="item">
        <i class="iconfont iconshijian" />
        {{ props.fileData?.updated_at }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
  fileType: {
    type: String,
    requert: true
  },
  fileData: {
    type: Object,
    default: () => {}
  }
})

const url = ref('')
watch(
  () => props.fileData,
  (newVal) => {
    url.value = newVal.filepath
  },
  {
    immediate: true
  }
)
</script>
<style lang="less" scoped>
.file-view-container {
  .file-view {
    text-align: center;
    background: #4d5358;
  }
  .iframe-content {
    width: 100%;
    height: 500px;
  }
  .file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px;
  }
}
</style>
